<template>
  <view class="container">
    <view class="top"> </view>
    <view class="bottom">
      <view class="title">
        <view class="title1">用户登录</view>
        <view class="title2">WELCOME TO THE SYSTEM </view>
      </view>
      <view>
        <uni-forms :modelValue="formData">
          <uni-forms-item>
            <view class="text-label">
              <uni-easyinput
                type="number"
                prefixIcon="person-filled"
                v-model="formData.mobileNum"
                placeholder="手机号"
              />
            </view>
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput
              type="password"
              prefixIcon="locked-filled"
              v-model="formData.pwd"
              placeholder="密码"
            />
          </uni-forms-item>
          <view class="app_version">
            <view class="agree1">
              <checkbox-group @change="checkboxChangemima">
                <checkbox
                  color="#138880"
                  :checked="jizhuMiMa"
                /> </checkbox-group
              ><text>记住密码</text></view
            >
          </view>
          <view class="app_version">
            <view>版本号：{{ appVersion }}</view>
            <view @click="onClickForget" style="color: #138880"
              >忘记密码？</view
            >
          </view>

          <view class="btn_control">
            <view style="padding: 20rpx"></view>
            <button class="btn-blue" @click="onClickLogin">登录</button>
            <view class="agree">
              <checkbox-group @change="checkboxChange">
                <checkbox color="#138880" :checked="isAgree" />
              </checkbox-group>
              <view style="margin-top: 4rpx">
                同意
                <text class="text_span" @click="onClickYH">
                  《用户服务协议》 </text
                >和
                <text class="text_span" @click="onClickPrivacy">
                  《隐私政策》
                </text>
              </view>
            </view>
          </view>
        </uni-forms>
      </view>
    </view>
    <view class="footer"></view>
  </view>
</template>

<script>
import { login } from "../../net/http";
import { websock } from "../../net/websock";
import store from "../../store";

export default {
  data() {
    return {
      isAgree: false,
      appVersion: "",
      formData: {
        mobileNum: "",
        pwd: "",
        graphCode: "",
      },
      jizhuMiMa: false,
    };
  },
  async onReady() {
    try {
      if (store.token) {
        let res = await websock.ping();
        console.log("ping response", res);
        uni.switchTab({ url: "/pages/dashboard/index" });
      }
    } catch (e) {
      console.error(e.message);
    }
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.appVersion = systemInfo.appVersion;
    this.isRemember();
    uni.$on("socketConnect", this.socketConnect);
  },
  onUnload() {
    uni.$off("socketConnect", this.socketConnect);
  },
  methods: {
    // 判断是否有记住密码
    isRemember() {
      let username = uni.getStorageSync("username");
      let password = uni.getStorageSync("password");
      if (username && password) {
        this.formData.mobileNum = username;
        this.formData.pwd = password;
        this.jizhuMiMa = true;
      }
    },
    // 跳转隐私政策
    onClickPrivacy() {
      uni.navigateTo({
        url: "/pages/my/privacy",
      });
    },

    // 跳转用户协议
    onClickYH() {
      uni.navigateTo({
        url: "/pages/my/yonghu",
      });
    },
    checkboxChangemima() {
      this.jizhuMiMa = !this.jizhuMiMa;
      if (this.jizhuMiMa) {
        uni.setStorageSync("username", this.formData.mobileNum);
        uni.setStorageSync("password", this.formData.pwd);
      } else {
        uni.removeStorageSync("username");
        uni.removeStorageSync("password");
      }
    },
    checkboxChange() {
      this.isAgree = !this.isAgree;
    },
    socketConnect() {
      console.log("socket connect", store);
    },
    onClickLogin() {
      if (!this.isAgree) {
        return uni.showToast({
          title: "请同意协议政策",
          icon: "error",
        });
      }
      if (!this.formData.mobileNum)
        return uni.showToast({ title: "请输入手机号",icon:'error' });

      // 验证手机号是否填写正确
      const regExp = /^1[3-9]\d{9}$/;
      const isValidPhoneNumber = regExp.test(this.formData.mobileNum);
      if(!isValidPhoneNumber) return uni.showToast({ title: "手机号输入错误",icon:'error' });

      if (!this.formData.pwd) return uni.showToast({ title: "请输入密码",icon:'error' });

      uni.showLoading({ mask: true });

      login(
        this.formData.mobileNum,
        this.formData.pwd,
        "app",
        (res) => {
          if (!res || !res.data)
            return uni.showToast({ title: "登录出错，请检查网络连接" });
          if (res.data.code != 0)
            return uni.showToast({ title: res.data.message });
          console.log("login res", res.data);
          store.token = res.data.data;
          uni.setStorageSync("token", store.token);
          uni.switchTab({ url: "/pages/dashboard/index" });
        },
        () => {
          uni.showToast({ title: "登录出错，请检查网络连接" });
        },
        () => {
          uni.hideLoading();
        }
      );
    },
    onClickForget() {
      uni.navigateTo({ url: "/pages/login/forgetPwd" });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/common.scss";
::v-deep .uni-icons {
  color: #c0c4cc !important;
}

::v-deep .is-input-border:hover {
  border-color: #138880 !important;
}

::v-deep .uni-checkbox-input:hover {
  border-color: #138880 !important;
}

.uni-forms-item {
  margin-bottom: 20rpx;
}

::v-deep .is-input-border {
  border-radius: 4px !important;
}

::v-deep .uni-checkbox-input {
  border-radius: 50%;
  width: 26rpx;
  height: 26rpx;
}
.agree {
  display: flex;
  align-items: center;
  margin-top: 28rpx;
  padding-left: 10rpx;
  font-size: 22rpx;
}
.agree1 {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 12px;
}
.text_span {
  color: #138880;
}

.container {
  width: 750rpx;
  height: 100vh;
  font-size: 14px;
  line-height: 24px;
  position: relative;

  .top {
    width: 750rpx;
    height: 41%;
    background-image: url("/static/login/login_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bottom {
    width: 750rpx;
    padding: 36rpx;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    height: 64%;
    background: #ffffff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    box-sizing: border-box;
    .title {
      .title1 {
        font-size: 48rpx;
        color: #138880;
        font-weight: 600;
        margin-bottom: 6rpx;
      }
      .title2 {
        font-size: 30rpx;
        color: #999999;
        margin: 10rpx 0;
        margin-bottom: 60rpx;
      }
    }
    .app_version {
      font-size: 20rpx;
      color: #858597;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .footer {
    width: 678rpx;
    margin: 0 auto;
    margin: 0 36rpx;
    height: 34rpx;
    position: absolute;
    bottom: 60rpx;
    z-index: 100;
    background-image: url("/static/login/login_footer.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

.text-label {
  font-size: 14px;
  font-weight: 400;
  color: #858597;
  line-height: 16px;
  padding-bottom: 2px;
}

.btn-blue {
  background-color: $themeColor;
  color: aliceblue;
}
</style>
